import React, { useState } from "react";
import {
  Layout,
  Typography,
  Button,
  Row,
  Col,
  Card,
  Checkbox,
  Progress,
  Tag,
} from "antd";
import { CheckboxChangeEvent } from "antd/es/checkbox";
import styles from "./index.module.less";

const { Title, Text } = Typography;

interface WorkspaceOption {
  id: string;
  label: string;
  description: string;
  isNew?: boolean;
}

const workspaceOptions: WorkspaceOption[] = [
  {
    id: "general",
    label: "通用工作台",
    description: "供设计/运营等其他角色使用",
  },
  {
    id: "business",
    label: "业务工作台",
    description: "供业务人员使用",
  },
  {
    id: "development",
    label: "开发工作台",
    description: "供开发人员使用",
  },
  {
    id: "testing",
    label: "测试工作台",
    description: "供测试人员使用",
    isNew: true,
  },
];

const PersonalDashboard: React.FC = () => {
  const [selectedWorkspaces, setSelectedWorkspaces] = useState<string[]>([
    "general",
  ]);

  const handleWorkspaceChange = (e: CheckboxChangeEvent) => {
    const { checked, value } = e.target;
    if (checked) {
      setSelectedWorkspaces([...selectedWorkspaces, value]);
    } else {
      setSelectedWorkspaces(selectedWorkspaces.filter((id) => id !== value));
    }
  };

  return (
    <Layout className={styles.container} data-oid="dc-95:a">
      <div className={styles.header} data-oid="s07lska">
        <Title level={2} data-oid="2-8nvnk">
          精益之星-个人工作台(全新体验版)
        </Title>
        <Text className={styles.description} data-oid="0qag95g">
          你的DevOps个人信息管家，在这里你可以一站式处理DevOps相关工作，即刻选择适合你的工作界面，开启新式工作体验！
        </Text>
        <Button type="primary" size="large" data-oid="dul4iun">
          立即体验
        </Button>
      </div>

      <Row gutter={24} data-oid="wuz3xwk">
        <Col span={6} data-oid="kybqa2h">
          <Card className={styles.sidebar} data-oid="mv:iebv">
            <Title level={3} data-oid="22a.-w:">
              按你的角色选择(可多选)
            </Title>
            {workspaceOptions.map((option) => (
              <div
                key={option.id}
                className={styles.workspaceOption}
                data-oid="s_l-k4z"
              >
                <Checkbox
                  checked={selectedWorkspaces.includes(option.id)}
                  onChange={handleWorkspaceChange}
                  value={option.id}
                  data-oid="or6g5ke"
                >
                  <div className={styles.workspaceLabel} data-oid="pmx6ggb">
                    {option.label}
                    {option.isNew && (
                      <Tag color="red" data-oid="gr90qwy">
                        NEW
                      </Tag>
                    )}
                    <Text type="secondary" data-oid="kg5-bxg">
                      {option.description}
                    </Text>
                  </div>
                </Checkbox>
              </div>
            ))}
          </Card>
        </Col>

        <Col span={18} data-oid="f5xr_nr">
          <Card className={styles.mainContent} data-oid="pvijolp">
            <Title level={3} data-oid="sckx-zq">
              通用工作台
            </Title>

            <div className={styles.section} data-oid="7imw4m:">
              <Title level={4} data-oid="1sc6850">
                我的事项
              </Title>
              <Progress percent={50} showInfo={false} data-oid="hu_cgxf" />
              <Progress percent={70} showInfo={false} data-oid="a7uqjd_" />
              <Progress percent={90} showInfo={false} data-oid="wccsjmi" />
            </div>

            <div className={styles.section} data-oid="03gjich">
              <Title level={4} data-oid="sbdc6-:">
                报工检查
              </Title>
              <Progress percent={30} showInfo={false} data-oid="rm.wm.f" />
              <Progress percent={60} showInfo={false} data-oid="-ao1k85" />
              <Progress percent={80} showInfo={false} data-oid="j.b0us5" />
            </div>

            <div className={styles.section} data-oid="xz.iz84">
              <Title level={4} data-oid="dc.kopp">
                我的流程
              </Title>
              <Progress percent={40} showInfo={false} data-oid="3orr4j4" />
              <Progress percent={60} showInfo={false} data-oid="8o8ft8l" />
              <Progress percent={80} showInfo={false} data-oid="0rf16vp" />
            </div>

            <div className={styles.section} data-oid="bttea7t">
              <Title level={4} data-oid="j.9jiov">
                常用链接
              </Title>
              {/* 常用链接内容 */}
            </div>
          </Card>
        </Col>
      </Row>
    </Layout>
  );
};

export default PersonalDashboard;
